﻿<nav class="top-bar">
    <ul class="title-area">
        <li class="name">
            <h1><a href="#"><span aria-hidden="true" class="icon-logo"></span>&nbsp;Azure&nbsp;<span>Inspector</span></a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="javascript:void(0)"><span>Menu</span></a></li>
    </ul>
    <section class="top-bar-section">
        <ul class="left">
            <li data-bind="css: { active: screen() == 'tables' }">
                <a data-bind="href: tablesUrl">Tables</a>
            </li>
            <li data-bind="css: { active: screen() == 'blobs' }">
                <a data-bind="href: blobsUrl">Blobs</a>
            </li>
            <li data-bind="css: { active: screen() == 'queues' }">
                <a data-bind="href: queuesUrl">Queues</a>
            </li>
            <li data-bind="css: { active: screen() == 'console' }">
                <a data-bind="href: consoleUrl">Console</a>
            </li>
            <li data-bind="css: { active: screen() == 'docs' }">
                <a data-bind="href: docsUrl">Docs</a>
            </li>
        </ul>
        <ul class="right">
            <li class="has-dropdown">
                <!-- ko if: context.proxyType() == 'shared'-->
                <a href="javascript:void(0)">Shared</a>
                <!-- /ko -->
                <!-- ko if: context.proxyType() == 'local'-->
                <a href="javascript:void(0)">Local</a>
                <!-- /ko -->
                <ul class="dropdown">
                    <li><a href="javascript:void(0)" data-bind="click: context.setSharedProxyType">Shared</a></li>
                    <li><a href="javascript:void(0)" data-bind="click: context.setLocalProxyType">Local</a></li>
                </ul>
            </li>
            <li class="has-dropdown" data-bind="with: accountsView">
                <!-- ko if: accountName() != null-->
                <a href="javascript:void(0)" data-bind="text: accountName"></a>
                <!-- /ko -->
                <!-- ko if: accountName() == null -->
                <a href="javascript:void(0)" data-bind="modalOpen: 'createAccount', click: details.forNew">Add a storage</a>
                <!-- /ko -->
                <ul class="dropdown">
                    <!-- ko foreach: accounts -->
                    <li><a href="javascript:void(0)" data-bind="text: storageName, click: $parent.select"></a></li>
                    <!-- /ko -->
                    <li><a href="javascript:void(0)" data-bind="modalOpen: 'createAccount', click: details.forNew">Add a storage</a></li>
                    <li><a href="javascript:void(0)" data-bind="href: $parent.accountsUrl">Manage</a></li>
                </ul>
            </li>
        </ul>
    </section>
</nav>
